<template>
  <div 
    id="globalHeader" 
    class="glass-header"
    v-motion
    :initial="{ y: -100, opacity: 0 }"
    :enter="{ y: 0, opacity: 1, transition: { duration: 800, ease: 'easeOut' } }"
  >
    <!-- 背景光晕效果 -->
    <div class="header-glow"></div>
    
    <div class="header-content">
      <!-- Logo区域 -->
      <div 
        class="logo-section"
        v-motion
        :initial="{ x: -50, opacity: 0 }"
        :enter="{ x: 0, opacity: 1, transition: { duration: 600, delay: 200 } }"
      >
        <router-link to="/" class="logo-link">
          <div class="title-bar">
            <div 
              class="logo-container"
              @mouseenter="onLogoHover"
              @mouseleave="onLogoLeave"
            >
              <img ref="logoRef" class="logo" src="../assets/logo.png" alt="logo" />
              <div class="logo-ring"></div>
            </div>
            <div class="title gradient-text">
              <span class="title-main">飞图协同</span>
              <span class="title-sub">云工坊</span>
            </div>
          </div>
        </router-link>
      </div>

      <!-- 导航菜单 -->
      <div 
        class="nav-section"
        v-motion
        :initial="{ y: -20, opacity: 0 }"
        :enter="{ y: 0, opacity: 1, transition: { duration: 500, delay: 400 } }"
      >
        <div class="nav-menu glass">
                <div 
                v-for="(item, index) in visibleItems" 
                :key="item?.key || index"
                class="nav-item"
                :class="{ active: item?.key && current.includes(String(item.key)) }"
                @click="item?.key && doMenuClick({ key: String(item.key) })"
              >
                <div class="nav-item-content">
                  <component v-if="item && 'icon' in item && item.icon" :is="(item as any).icon" class="nav-icon" />
                  <span class="nav-label">{{ item && 'label' in item ? item.label : '' }}</span>
                </div>
            <div class="nav-item-indicator"></div>
          </div>
        </div>
      </div>

      <!-- 用户区域 -->
      <div 
        class="user-section"
        v-motion
        :initial="{ x: 50, opacity: 0 }"
        :enter="{ x: 0, opacity: 1, transition: { duration: 600, delay: 300 } }"
      >
        <!-- 主题切换按钮 -->
        <div class="theme-toggle" @click="toggleTheme">
          <div class="theme-icon">{{ getThemeIcon() }}</div>
          <div class="theme-tooltip">{{ getThemeName() }}</div>
        </div>

        <!-- 公告按钮 -->
        <div class="announcement-toggle" @click="toggleAnnouncementCard">
          <div class="announcement-icon">📢</div>
          <a-badge 
            v-if="unreadAnnouncementCount > 0" 
            :count="unreadAnnouncementCount" 
            :number-style="{ backgroundColor: '#ff4757' }"
            class="announcement-badge"
          />
          <div class="announcement-tooltip">系统公告</div>
        </div>

        <!-- VIP标识 -->
        <div v-if="loginUserStore.loginUser.id" class="vip-badge-container" @click="openVipModal">
          <div 
            class="vip-badge-header" 
            :class="getVipBadgeHeaderClass()"
            v-motion
            :initial="{ scale: 0, opacity: 0 }"
            :enter="{ scale: 1, opacity: 1, transition: { duration: 400, delay: 400 } }"
          >
            <CrownOutlined class="vip-icon" />
            <span class="vip-text">{{ getVipBadgeText() }}</span>
            <div class="vip-badge-glow"></div>
            <!-- 动态挂件 -->
            <div class="vip-pendant">
              <div class="pendant-chain"></div>
              <div class="pendant-charm" :class="getPendantCharmClass()">
                <div class="charm-content">{{ getPendantText() }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 用户信息 -->
        <div class="user-info">
          <div v-if="loginUserStore.loginUser.id" class="user-profile">
            <a-dropdown placement="bottomRight">
              <div class="user-avatar-section" @click.prevent>
                <VipAvatar 
                  :avatar="loginUserStore.loginUser.userAvatar" 
                  :vip-level="userVipLevel"
                  :user-name="loginUserStore.loginUser.userName"
                  :size="40"
                  :show-pendant="true"
                  class="user-avatar hover-lift"
                />
                <div class="user-details">
                  <div class="user-name">{{ loginUserStore.loginUser.userName ?? '无名' }}</div>
                  <div class="user-status">
                    <span v-if="userVipLevel > 0" class="vip-status" :class="getVipStatusClass()">
                      {{ userVipLevel === 1 ? 'VIP' : 'SVIP' }}
                    </span>
                  </div>
                </div>
                <div class="dropdown-arrow">
                  <DownOutlined />
                </div>
              </div>
              <template #overlay>
                <div class="user-dropdown glass">
                  <div class="dropdown-item" @click="goToPersonalCenter">
                    <UserOutlined class="dropdown-icon" />
                    <span>个人中心</span>
                  </div>
                  <div class="dropdown-item" @click="goToMySpace">
                    <FolderOutlined class="dropdown-icon" />
                    <span>我的空间</span>
                  </div>
                  <div class="dropdown-item" @click="showCareCodeModal = true">
                    <GiftOutlined class="dropdown-icon" />
                    <span>兑换卡密</span>
                  </div>
                  <div class="dropdown-divider"></div>
                  <div class="dropdown-item danger" @click="doLogout">
                    <LogoutOutlined class="dropdown-icon" />
                    <span>退出登录</span>
                  </div>
                </div>
              </template>
            </a-dropdown>
          </div>
          <div v-else class="login-section">
            <a-button 
              type="primary" 
              class="login-btn btn-modern"
              @click="showLoginModal"
            >
              <span>登录</span>
            </a-button>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 登录弹窗 -->
  <LoginModal 
    v-model:open="loginModalVisible" 
    @success="onLoginSuccess"
  />
  
  <!-- 卡密兑换弹窗 -->
  <CareCodeModal
    v-model:open="showCareCodeModal"
    :user-info="userInfo"
    @success="onCareCodeSuccess"
  />

  <!-- VIP权益弹窗 -->
  <a-modal
    v-model:open="showVipModal"
    title="VIP会员权益"
    width="900px"
    :footer="null"
    class="vip-modal"
  >
    <div class="vip-modal-content">
      <!-- 顶部信息区域：VIP状态和空间使用情况并排 -->
      <div class="top-info-section">
        <!-- 当前VIP状态 -->
        <div class="info-card-container">
          <h4 class="card-title">
            <CrownOutlined class="card-icon" />
            VIP会员状态
          </h4>
          <div class="info-card status-card" :class="getVipStatusCardClass()">
            <div class="card-header">
              <span class="status-level">{{ getCurrentVipStatusTitle() }}</span>
              <span v-if="userVipLevel > 0 && userInfo?.expireTime" class="status-expire">
                {{ formatExpireTime() }}
              </span>
            </div>
            <div class="card-content">
              <p class="status-description">{{ getCurrentVipStatusDesc() }}</p>
              <div class="status-details">
                <div class="detail-item">
                  <span class="detail-label">会员等级</span>
                  <span class="detail-value">{{ getCurrentVipStatusTitle() }}</span>
                </div>
                <div class="detail-item" v-if="userVipLevel > 0">
                  <span class="detail-label">到期状态</span>
                  <span class="detail-value">{{ getVipExpireStatus() }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 空间使用情况 -->
        <div class="info-card-container">
          <h4 class="card-title">
            <DatabaseOutlined class="card-icon" />
            空间使用概览
          </h4>
          <div class="info-card usage-card" v-if="spaceUsageData">
            <div class="card-header">
              <span class="usage-title">{{ getSpaceTypeDisplayName() }}</span>
              <span class="usage-count">{{ spaceUsageData.usedCount || 0 }} 张图片</span>
            </div>
            <div class="card-content">
              <div class="usage-stats">
                <div class="detail-item">
                  <span class="detail-label">存储空间</span>
                  <span class="detail-value">{{ formatSize(spaceUsageData.usedSize || 0) }}</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">总容量</span>
                  <span class="detail-value">{{ spaceUsageData.maxSize ? formatSize(spaceUsageData.maxSize) : '无限制' }}</span>
                </div>
                <div class="detail-item">
                  <span class="detail-label">使用率</span>
                  <span class="detail-value">{{ (spaceUsageData.sizeUsageRatio || 0).toFixed(1) }}%</span>
                </div>
              </div>
              <div class="usage-progress">
                <a-progress 
                  :percent="Math.round(spaceUsageData.sizeUsageRatio || 0)"
                  :status="getSpaceUsageStatus(spaceUsageData.sizeUsageRatio || 0)"
                  size="small"
                  :show-info="false"
                />
              </div>
            </div>
          </div>
          <div class="info-card usage-card-empty" v-else>
            <div class="empty-content">
              <DatabaseOutlined class="empty-icon" />
              <p class="empty-text">暂无空间数据</p>
              <p class="empty-tip">{{ getSpaceEmptyTip() }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- VIP权益对比表格 -->
      <div class="vip-benefits-comparison">
        <h4 class="comparison-title">会员权益对比</h4>
        <a-table
          :columns="vipBenefitColumns"
          :data-source="vipBenefitData"
          :pagination="false"
          :bordered="true"
          size="middle"
          class="vip-comparison-table"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'feature'">
              <span class="feature-name">{{ record.feature }}</span>
            </template>
            <template v-else-if="column.key === 'free'">
              <span v-if="record.free === true" class="check-icon">
                <CheckOutlined style="color: #52c41a" />
              </span>
              <span v-else-if="record.free === false" class="close-icon">
                <CloseOutlined style="color: #ff4d4f" />
              </span>
              <span v-else class="feature-text">{{ record.free }}</span>
            </template>
            <template v-else-if="column.key === 'vip'">
              <span v-if="record.vip === true" class="check-icon">
                <CheckOutlined style="color: #52c41a" />
              </span>
              <span v-else-if="record.vip === false" class="close-icon">
                <CloseOutlined style="color: #ff4d4f" />
              </span>
              <span v-else class="feature-text">{{ record.vip }}</span>
            </template>
            <template v-else-if="column.key === 'svip'">
              <span v-if="record.svip === true" class="check-icon">
                <CheckOutlined style="color: #52c41a" />
              </span>
              <span v-else-if="record.svip === false" class="close-icon">
                <CloseOutlined style="color: #ff4d4f" />
              </span>
              <span v-else class="feature-text">{{ record.svip }}</span>
            </template>
          </template>
        </a-table>
      </div>

      <!-- 操作按钮 -->
      <div class="vip-actions">
        <a-button 
          type="primary" 
          size="large"
          @click="openCareCodeModal"
          :icon="h(GiftOutlined)"
          class="upgrade-btn"
        >
          {{ getUpgradeButtonText() }}
        </a-button>
        
        <div class="contact-info">
          <MailOutlined class="contact-icon" />
          <span class="contact-text">购买咨询：703793464@qq.com</span>
        </div>
      </div>
    </div>
  </a-modal>

  <!-- 公告卡片 -->
  <div 
    v-if="showAnnouncementCard" 
    class="announcement-card-overlay" 
    @click="closeAnnouncementCard"
  >
    <div 
      class="announcement-card" 
      :class="{ 'dark-mode': isDarkMode }"
      @click.stop
    >
      <div class="announcement-card-header">
        <h3 class="announcement-card-title">
          <BellOutlined />
          系统公告
        </h3>
        <a-button 
          type="text" 
          @click="closeAnnouncementCard"
          class="close-btn"
        >
          ✕
        </a-button>
      </div>
      
      <div class="announcement-card-content">
        <AnnouncementList @unreadCountChange="handleUnreadCountChange" />
      </div>
      
      <div class="announcement-card-footer">
        <a-button 
          type="link" 
          @click="goToAnnouncementPage"
          size="small"
        >
          查看全部公告 →
        </a-button>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, h, ref, onMounted } from 'vue'
import { HomeOutlined, LogoutOutlined, UserOutlined, DownOutlined, FolderOutlined, GiftOutlined, CrownOutlined, CheckOutlined, CloseOutlined, MailOutlined, DatabaseOutlined, BellOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import type { MenuProps } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import { useLoginUserStore } from '@/stores/useLoginUserStore.ts'
import { userLogoutUsingPost, getUserInfoVoByIdUsingGet } from '@/api/userController.ts'
import { getSpaceUsageAnalyzeUsingPost } from '@/api/spaceAnalyzeController.ts'
import { listSpaceVoByPageUsingPost } from '@/api/spaceController.ts'
import { SPACE_TYPE_ENUM } from '@/constants/space.ts'
import { getUnreadCount } from '@/api/announcementController'
import { announcementWebSocket } from '@/utils/announcementWebSocket'
import { useTheme } from '@/composables/useTheme'
import AnnouncementList from '@/components/AnnouncementList.vue'
import { useAnimations } from '@/composables/useAnimations'
import { gsap } from 'gsap'
import LoginModal from './LoginModal.vue'
import VipAvatar from './VipAvatar.vue'
import CareCodeModal from './CareCodeModal.vue'

const loginUserStore = useLoginUserStore()
const router = useRouter()
const { theme, toggleTheme, getThemeIcon, getThemeName } = useTheme()
const { useMouseFollow } = useAnimations()

// Logo元素引用
const logoRef = ref<HTMLElement>()

// 弹窗状态
const loginModalVisible = ref(false)
const showCareCodeModal = ref(false)
const showVipModal = ref(false)

// 用户信息
const userInfo = ref<API.UserInfoVO | null>(null)

// 空间使用数据
const spaceUsageData = ref<API.SpaceUsageAnalyzeResponse | null>(null)

// 未读公告数量
const unreadAnnouncementCount = ref(0)

// 公告卡片状态
const showAnnouncementCard = ref(false)

// 用户VIP等级
const userVipLevel = computed(() => {
  return loginUserStore.loginUser?.vipLevel || 0
})

// 主题相关计算属性
const isDarkMode = computed(() => {
  return theme.value === 'dark'
})

// 未经过滤的菜单项
const originItems = [
  {
    key: '/',
    icon: () => h(HomeOutlined),
    label: '主页',
    title: '主页',
  },
  {
    key: '/add_picture',
    label: '创建图片',
    title: '创建图片',
  },
  {
    key: '/my_space',
    label: '我的空间',
    title: '我的空间',
  },
  {
    key: '/personal_center',
    label: '个人中心',
    title: '个人中心',
  },
  {
    key: '/admin/userManage',
    label: '用户管理',
    title: '用户管理',
  },
  {
    key: '/admin/pictureManage',
    label: '图片管理',
    title: '图片管理',
  },
  {
    key: '/admin/spaceManage',
    label: '空间管理',
    title: '空间管理',
  },
  {
    key: '/admin/careCodeManage',
    label: '卡密管理',
    title: '卡密管理',
  },
]

// 根据权限过滤菜单项
const filterMenus = (menus = [] as MenuProps['items']) => {
  return menus?.filter((menu) => {
    // 管理员才能看到 /admin 开头的菜单
    if (menu?.key && typeof menu.key === 'string' && menu.key.startsWith('/admin')) {
      const loginUser = loginUserStore.loginUser
      if (!loginUser || loginUser.userRole !== 'admin') {
        return false
      }
    }
    return true
  })
}

// 展示在菜单的路由数组 - 根据用户权限显示菜单项
const items = computed(() => filterMenus(originItems))
const visibleItems = computed(() => {
  const filteredItems = items.value || []
  const userRole = loginUserStore.loginUser.userRole
  console.log('用户角色:', userRole, '过滤后的菜单项:', filteredItems)
  
  // 临时显示所有过滤后的菜单项，不限制数量
  console.log('最终显示的菜单项:', filteredItems)
  return filteredItems
})

// 当前要高亮的菜单项
const current = ref<string[]>([])

// 监听路由变化，更新高亮菜单项
router.afterEach((to, from, next) => {
  current.value = [to.path]
})

// 路由跳转事件
const doMenuClick = ({ key }: { key: string }) => {
  router.push({
    path: key,
  })
}

// Logo动画效果
const onLogoHover = () => {
  if (logoRef.value) {
    gsap.to(logoRef.value, {
      rotation: 360,
      duration: 0.8,
      ease: 'power2.out'
    })
  }
}

const onLogoLeave = () => {
  if (logoRef.value) {
    gsap.to(logoRef.value, {
      rotation: 0,
      duration: 0.5,
      ease: 'power2.out'
    })
  }
}

// 导航功能
const goToMySpace = () => {
  router.push('/my_space')
}

const goToPersonalCenter = () => {
  router.push('/personal_center')
}

// 显示登录弹窗
const showLoginModal = () => {
  loginModalVisible.value = true
}

// 登录成功处理
const onLoginSuccess = () => {
  // 登录成功后可以刷新页面或执行其他逻辑
  message.success('欢迎回来！')
  // 重新加载用户信息
  loadUserInfo()
}

// 卡密兑换成功处理
const onCareCodeSuccess = () => {
  // 重新加载用户信息和空间数据
  loadUserInfo()
}

// 公告卡片相关函数
const toggleAnnouncementCard = () => {
  showAnnouncementCard.value = !showAnnouncementCard.value
}

const closeAnnouncementCard = () => {
  showAnnouncementCard.value = false
}

const goToAnnouncementPage = () => {
  router.push('/announcement')
  closeAnnouncementCard()
}

const handleUnreadCountChange = (count: number) => {
  unreadAnnouncementCount.value = count
}

// 获取VIP状态样式类
const getVipStatusClass = () => {
  if (userVipLevel.value === 1) return 'vip-status-vip'
  if (userVipLevel.value === 2) return 'vip-status-svip'
  return ''
}

// 获取VIP徽章头部样式类
const getVipBadgeHeaderClass = () => {
  if (userVipLevel.value === 1) return 'vip-badge-vip'
  if (userVipLevel.value === 2) return 'vip-badge-svip'
  return 'vip-badge-normal'
}

// 获取VIP徽章文本
const getVipBadgeText = () => {
  if (userVipLevel.value === 1) return '续费VIP'
  if (userVipLevel.value === 2) return '续费SVIP'
  return '开通VIP'
}

// VIP权益表格配置
const vipBenefitColumns = [
  { title: '功能特权', key: 'feature', dataIndex: 'feature', width: '40%' },
  { title: '普通用户', key: 'free', dataIndex: 'free', align: 'center', width: '20%' },
  { title: 'VIP会员', key: 'vip', dataIndex: 'vip', align: 'center', width: '20%' },
  { title: 'SVIP会员', key: 'svip', dataIndex: 'svip', align: 'center', width: '20%' },
]

const vipBenefitData = [
  { key: '1', feature: '图片上传', free: true, vip: true, svip: true },
  { key: '2', feature: '公共空间访问', free: true, vip: true, svip: true },
  { key: '3', feature: '基础搜索功能', free: true, vip: true, svip: true },
  { key: '4', feature: '私有空间数量', free: false, vip: '3个', svip: '无限' },
  { key: '5', feature: '高级搜索功能', free: false, vip: true, svip: true },
  { key: '6', feature: '批量操作', free: false, vip: true, svip: true },
  { key: '7', feature: 'AI图片生成', free: false, vip: false, svip: true },
  { key: '8', feature: 'AI图片修复', free: false, vip: false, svip: true },
  { key: '9', feature: '专属客服支持', free: false, vip: true, svip: true },
]

// 获取VIP状态卡片样式类
const getVipStatusCardClass = () => {
  if (userVipLevel.value === 1) return 'status-card-vip'
  if (userVipLevel.value === 2) return 'status-card-svip'
  return 'status-card-normal'
}

// 获取当前VIP状态标题
const getCurrentVipStatusTitle = () => {
  if (userVipLevel.value === 1) return 'VIP会员'
  if (userVipLevel.value === 2) return 'SVIP会员'
  return '普通用户'
}

// 获取当前VIP状态描述
const getCurrentVipStatusDesc = () => {
  if (userVipLevel.value === 1) return '享受VIP专属特权，尊享更多功能'
  if (userVipLevel.value === 2) return '享受SVIP顶级特权，尊享全部功能'
  return '升级VIP解锁更多高级功能'
}

// 格式化到期时间
const formatExpireTime = () => {
  if (!userInfo.value?.expireTime) return ''
  const expireTime = new Date(userInfo.value.expireTime)
  const now = new Date()
  const diffYears = (expireTime.getTime() - now.getTime()) / (1000 * 60 * 60 * 24 * 365)
  if (diffYears > 80) return '永久有效'
  return expireTime.toLocaleString('zh-CN')
}

// 获取VIP到期状态
const getVipExpireStatus = () => {
  if (!userInfo.value?.expireTime) return '未知'
  const expireTime = new Date(userInfo.value.expireTime)
  const now = new Date()
  const diffYears = (expireTime.getTime() - now.getTime()) / (1000 * 60 * 60 * 24 * 365)
  if (diffYears > 80) return '永久会员'
  
  const diffDays = Math.ceil((expireTime.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))
  if (diffDays > 30) return '正常'
  if (diffDays > 7) return '即将到期'
  if (diffDays > 0) return '即将到期'
  return '已过期'
}

// 获取升级按钮文本
const getUpgradeButtonText = () => {
  if (userVipLevel.value === 1) return '续费VIP会员'
  if (userVipLevel.value === 2) return '续费SVIP会员'
  return '兑换卡密开通VIP'
}

// 获取挂件样式类
const getPendantCharmClass = () => {
  if (userVipLevel.value === 1) return 'charm-renew'
  if (userVipLevel.value === 2) return 'charm-renew charm-svip'
  return 'charm-open'
}

// 获取挂件文本
const getPendantText = () => {
  if (userVipLevel.value === 1) return '续费'
  if (userVipLevel.value === 2) return '续费'
  return '开通'
}

// 打开VIP弹窗
const openVipModal = async () => {
  showVipModal.value = true
  // 打开弹窗时重新加载空间数据
  await loadSpaceUsage()
}

// 打开兑换卡密弹窗
const openCareCodeModal = () => {
  showVipModal.value = false
  showCareCodeModal.value = true
}

// 获取空间类型显示名称
const getSpaceTypeDisplayName = () => {
  const isAdmin = loginUserStore.loginUser?.userRole === 'admin'
  return isAdmin ? '公共空间' : '我的空间'
}

// 获取空间为空时的提示文本
const getSpaceEmptyTip = () => {
  const isAdmin = loginUserStore.loginUser?.userRole === 'admin'
  return isAdmin ? '公共空间暂无数据' : '请先创建私有空间'
}

// 获取空间使用状态
const getSpaceUsageStatus = (percentage: number) => {
  if (percentage >= 90) return 'exception'
  if (percentage >= 70) return 'active'
  return 'normal'
}

// 格式化文件大小
const formatSize = (bytes: number) => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

// 加载用户信息
const loadUserInfo = async () => {
  if (!loginUserStore.loginUser?.id) return
  
  try {
    const res = await getUserInfoVoByIdUsingGet({
      id: loginUserStore.loginUser.id
    })
    
    if (res.data.code === 0) {
      userInfo.value = res.data.data || null
      // 加载空间使用情况
      await loadSpaceUsage()
      // 加载未读公告数量
      await loadUnreadAnnouncementCount()
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
  }
}

// 加载未读公告数量
const loadUnreadAnnouncementCount = async () => {
  if (!loginUserStore.loginUser?.id) return
  
  try {
    const res = await getUnreadCount()
    if (res.data && typeof res.data === 'number') {
      unreadAnnouncementCount.value = res.data
      // 同步到WebSocket服务
      announcementWebSocket.setUnreadCount(res.data)
    }
  } catch (error) {
    console.error('获取未读公告数量失败:', error)
    unreadAnnouncementCount.value = 0
    announcementWebSocket.setUnreadCount(0)
  }
}

// 显示公告页面
const showAnnouncementPage = () => {
  router.push('/announcement')
}

// 加载空间使用情况
const loadSpaceUsage = async () => {
  if (!loginUserStore.loginUser?.id) return
  
  try {
    // 检查是否为管理员
    const isAdmin = loginUserStore.loginUser?.userRole === 'admin'
    
    if (isAdmin) {
      // 管理员查看公共空间
      const res = await getSpaceUsageAnalyzeUsingPost({
        queryPublic: true
      })
      
      if (res.data.code === 0 && res.data.data) {
        spaceUsageData.value = res.data.data
      } else {
        console.error('GlobalHeader获取公共空间数据失败:', res.data.message || '未知错误')
        spaceUsageData.value = null
      }
    } else {
      // 普通用户：获取第一个私有空间的使用情况
      try {
        const spaceListRes = await listSpaceVoByPageUsingPost({
          userId: loginUserStore.loginUser.id,
          current: 1,
          pageSize: 1,
          spaceType: SPACE_TYPE_ENUM.PRIVATE,
        })
        
        if (spaceListRes.data.code === 0 && spaceListRes.data.data?.records && spaceListRes.data.data.records.length > 0) {
          const firstSpace = spaceListRes.data.data.records[0]
          const usageRes = await getSpaceUsageAnalyzeUsingPost({
            spaceId: firstSpace.id?.toString()
          })
          
          if (usageRes.data.code === 0 && usageRes.data.data) {
            spaceUsageData.value = usageRes.data.data
          }
        } else {
          // 用户没有私有空间，清空数据
          spaceUsageData.value = null
        }
      } catch (userError) {
        console.error('获取用户空间失败:', userError)
        spaceUsageData.value = null
      }
    }
  } catch (error) {
    console.error('获取空间使用情况失败:', error)
    spaceUsageData.value = null
  }
}

// 用户注销
const doLogout = async () => {
  try {
  const res = await userLogoutUsingPost()
  if (res.data.code === 0) {
      // 清除登录状态
      loginUserStore.setLoginUser({
        userName: '未登录',
        id: undefined,
        userRole: undefined,
      })
      message.success('退出登录成功')
      // 跳转到首页而不是登录页
      await router.push('/')
    } else {
      message.error('退出登录失败，' + res.data.message)
    }
  } catch (error) {
    console.error('退出登录出错:', error)
    // 即使请求失败，也清除本地登录状态
    loginUserStore.setLoginUser({
      userName: '未登录',
      id: undefined,
      userRole: undefined,
    })
    message.success('已退出登录')
    await router.push('/')
  }
}

// 组件挂载时的初始化
onMounted(() => {
  // 为logo添加鼠标跟随效果
  if (logoRef.value) {
    useMouseFollow(logoRef, 0.05)
  }
  
  // 设置当前路由高亮
  current.value = [router.currentRoute.value.path]
  
  // 加载用户信息
  loadUserInfo()
  
  // 设置公告WebSocket回调
  announcementWebSocket.onUnreadCountChange((count: number) => {
    unreadAnnouncementCount.value = count
  })
  
  // 监听未读数量变化
  unreadAnnouncementCount.value = announcementWebSocket.unreadCount.value
})
</script>

<style scoped>
#globalHeader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 80px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

[data-theme="dark"] #globalHeader {
  background: rgba(31, 41, 55, 0.8);
  border-bottom: 1px solid rgba(75, 85, 99, 0.2);
}

.header-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #0ea5e9, transparent);
  opacity: 0.6;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem; /* 减少左右内边距 */
  height: 100%;
  max-width: none; /* 移除最大宽度限制 */
  margin: 0; /* 移除自动居中 */
  width: 100%; /* 占满整个宽度 */
}

/* Logo区域 */
.logo-section {
  flex-shrink: 0;
  margin-right: auto; /* 确保logo区域靠左 */
}

.logo-link {
  text-decoration: none;
  color: inherit;
}

.title-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.logo-container {
  position: relative;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: all 0.3s ease;
  filter: drop-shadow(0 4px 8px rgba(14, 165, 233, 0.3));
}

.logo-ring {
  position: absolute;
  width: 50px;
  height: 50px;
  border: 2px solid transparent;
  border-top: 2px solid #0ea5e9;
  border-radius: 50%;
  animation: float 3s ease-in-out infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.logo-container:hover .logo-ring {
  opacity: 1;
}

.title {
  display: flex;
  flex-direction: column;
  font-weight: 700;
}

.title-main {
  font-size: 1.25rem;
  line-height: 1.2;
}

.title-sub {
  font-size: 0.875rem;
  opacity: 0.8;
}

/* 导航区域 */
.nav-section {
  display: flex;
  justify-content: center;
  flex: 0 1 auto; /* 不强制占满空间 */
  margin: 0 2rem; /* 左右给一点间距 */
}

.nav-menu {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

[data-theme="dark"] .nav-menu {
  background: rgba(31, 41, 55, 0.3);
}

.nav-item {
  position: relative;
  padding: 0.75rem 1.5rem;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
}

.nav-item:hover {
  background: rgba(14, 165, 233, 0.1);
  transform: translateY(-2px);
}

.nav-item.active {
  background: linear-gradient(135deg, #0ea5e9, #3b82f6);
  color: white;
  box-shadow: 0 4px 20px rgba(14, 165, 233, 0.3);
}

.nav-item.active .nav-item-indicator {
  opacity: 1;
  transform: scaleX(1);
}

.nav-item-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  z-index: 2;
}

.nav-icon {
  font-size: 1rem;
}

.nav-label {
  font-weight: 500;
  font-size: 0.9rem;
}

.nav-item-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #0ea5e9, #3b82f6);
  opacity: 0;
  transform: scaleX(0);
  transition: all 0.3s ease;
}

/* 用户区域 */
.user-section {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
  margin-left: auto; /* 确保用户区域靠右 */
}

/* 主题切换 */
.theme-toggle {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.theme-toggle:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.theme-icon {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

.theme-toggle:hover .theme-icon {
  transform: rotate(180deg);
}

.theme-tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  border-radius: 6px;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.theme-toggle:hover .theme-tooltip {
  opacity: 1;
}

/* 公告按钮 */
.announcement-toggle {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.announcement-toggle:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.announcement-icon {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

.announcement-toggle:hover .announcement-icon {
  transform: rotate(15deg);
}

.announcement-badge {
  position: absolute;
  top: -5px;
  right: -5px;
}

.announcement-tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  border-radius: 6px;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.announcement-toggle:hover .announcement-tooltip {
  opacity: 1;
}

/* 用户信息 */
.user-profile .user-avatar-section {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.user-avatar-section:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}


.user-details {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.2;
}

.user-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  opacity: 0.7;
}


.vip-status {
  padding: 1px 4px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  opacity: 1;
}

.vip-status-vip {
  background: linear-gradient(45deg, #ffd700, #ffed4e);
  color: #000;
  box-shadow: 0 1px 3px rgba(255, 215, 0, 0.3);
}

.vip-status-svip {
  background: linear-gradient(45deg, #8b5cf6, #ec4899);
  color: white;
  box-shadow: 0 1px 3px rgba(139, 92, 246, 0.3);
}

.dropdown-arrow {
  font-size: 0.75rem;
  opacity: 0.7;
  transition: transform 0.3s ease;
}

.user-avatar-section:hover .dropdown-arrow {
  transform: rotate(180deg);
}

/* 用户下拉菜单 */
.user-dropdown {
  padding: 0.5rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  min-width: 180px;
}

[data-theme="dark"] .user-dropdown {
  background: rgba(31, 41, 55, 0.95);
  border: 1px solid rgba(75, 85, 99, 0.3);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  color: #374151;
}

.dropdown-item:hover {
  background: rgba(14, 165, 233, 0.1);
  transform: translateX(4px);
  color: #1f2937;
}

.dropdown-item.danger:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* 黑色模式下的下拉菜单项样式 */
[data-theme="dark"] .dropdown-item {
  color: #e5e7eb;
}

[data-theme="dark"] .dropdown-item:hover {
  background: rgba(14, 165, 233, 0.2);
  color: #f3f4f6;
}

[data-theme="dark"] .dropdown-item.danger:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

.dropdown-icon {
  font-size: 1rem;
  opacity: 0.8;
}

.dropdown-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
  margin: 0.5rem 0;
}

[data-theme="dark"] .dropdown-divider {
  background: rgba(255, 255, 255, 0.1);
}

/* 登录按钮 */
.login-btn {
  padding: 0.75rem 1.5rem !important;
  border-radius: 50px !important;
  background: linear-gradient(135deg, #0ea5e9, #3b82f6) !important;
  border: none !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  height: auto !important;
  min-height: 40px !important;
}

.login-btn span {
  display: inline-block !important;
  line-height: 1 !important;
}

.login-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(14, 165, 233, 0.4) !important;
}

/* 确保Ant Design按钮内容居中 */
.login-btn :deep(.ant-btn-content) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

.login-btn :deep(.ant-btn-loading-icon) {
  margin-right: 0.5rem !important;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .header-content {
    padding: 0 0.75rem; /* 移动端更紧凑 */
  }
  
  .nav-section {
    margin: 0 1rem; /* 移动端减少导航区域间距 */
  }
  
  .nav-menu {
    gap: 0.25rem;
  }
  
  .nav-item {
    padding: 0.5rem 1rem;
  }
  
  .nav-label {
    font-size: 0.75rem;
  }
}

@media (max-width: 768px) {
  #globalHeader {
    height: 70px;
  }
  
  .title-main {
    font-size: 1.1rem;
  }
  
  .title-sub {
    display: none;
  }
  
  .nav-menu {
    gap: 0.125rem;
  }
  
  .nav-item {
    padding: 0.5rem;
  }
  
  .user-details {
    display: none;
  }
  
  .dropdown-arrow {
    display: none;
  }
}

@media (max-width: 640px) {
  .nav-section {
    display: none;
  }
  
  .header-content {
    justify-content: space-between;
  }
}

/* VIP徽章 */
.vip-badge-container {
  cursor: pointer;
  margin-right: 16px;
}

.vip-badge-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid transparent;
  transition: all 0.3s ease;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.vip-badge-normal {
  background: linear-gradient(135deg, #ff6b6b, #feca57);
  border-color: rgba(255, 107, 107, 0.5);
  color: white;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 15px rgba(255, 107, 107, 0.3);
}

.vip-badge-vip {
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  border-color: rgba(255, 215, 0, 0.6);
  color: #000;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

.vip-badge-svip {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  border-color: rgba(139, 92, 246, 0.6);
  color: white;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);
}

.vip-badge-header:hover {
  transform: translateY(-2px);
}

.vip-badge-normal:hover {
  box-shadow: 0 8px 25px rgba(255, 107, 107, 0.5);
}

.vip-badge-vip:hover {
  box-shadow: 0 8px 25px rgba(255, 215, 0, 0.5);
}

.vip-badge-svip:hover {
  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.5);
}

/* VIP挂件样式 */
.vip-pendant {
  position: absolute;
  top: 100%;
  right: -8px;
  z-index: 10;
}

.pendant-chain {
  width: 1px;
  height: 12px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.3));
  margin: 0 auto;
  animation: chain-sway 4s ease-in-out infinite;
}

.pendant-charm {
  width: 32px;
  height: 18px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 700;
  color: white;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  animation: charm-bounce 3s ease-in-out infinite;
  cursor: pointer;
}

.charm-open {
  background: linear-gradient(135deg, #ff4757, #ffa502);
  animation: charm-bounce 2s ease-in-out infinite, charm-glow-open 2s ease-in-out infinite;
}

.charm-renew {
  background: linear-gradient(135deg, #ffd700, #ffb347);
  animation: charm-bounce 3s ease-in-out infinite, charm-glow-renew 3s ease-in-out infinite;
}

.charm-renew.charm-svip {
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  animation: charm-bounce 3s ease-in-out infinite, charm-glow-svip 3s ease-in-out infinite;
}

.charm-content {
  white-space: nowrap;
  letter-spacing: 0.5px;
}

.vip-icon {
  font-size: 16px;
}

.vip-text {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.vip-badge-glow {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: vip-badge-shine 3s ease-in-out infinite;
}

/* VIP弹窗样式 */
:deep(.vip-modal .ant-modal-content) {
  border-radius: 16px;
  overflow: hidden;
}

.vip-modal-content {
  padding: 0;
}


.status-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid transparent;
}

.status-card-normal {
  background: linear-gradient(135deg, rgba(107, 114, 128, 0.1), rgba(75, 85, 99, 0.1));
  border-color: rgba(107, 114, 128, 0.2);
}

.status-card-vip {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 237, 78, 0.1));
  border-color: rgba(255, 215, 0, 0.3);
}

.status-card-svip {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.1));
  border-color: rgba(139, 92, 246, 0.3);
}

.status-icon {
  font-size: 32px;
  color: #6366f1;
}

.status-card-vip .status-icon {
  color: #ffd700;
}

.status-card-svip .status-icon {
  color: #8b5cf6;
}

.status-info {
  flex: 1;
}

.status-title {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 600;
}

.status-desc {
  margin: 0 0 8px 0;
  opacity: 0.8;
}

.expire-info {
  font-size: 14px;
  opacity: 0.7;
}

.vip-benefits-comparison {
  margin-bottom: 24px;
}

.comparison-title {
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 600;
}

.vip-comparison-table {
  border-radius: 8px;
  overflow: hidden;
}

.vip-comparison-table :deep(.ant-table-thead > tr > th) {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.2);
  color: #333;
  font-weight: 600;
  text-align: center;
}

/* 修复表头在浅色模式下的样式 */
[data-theme="light"] .vip-comparison-table :deep(.ant-table-thead > tr > th) {
  color: #333;
}

.vip-comparison-table :deep(.ant-table-tbody > tr > td) {
  border-color: rgba(0, 0, 0, 0.05);
  text-align: center;
  color: #333;
}

/* 修复表格内容在浅色模式下的样式 */
[data-theme="light"] .vip-comparison-table :deep(.ant-table-tbody > tr > td) {
  color: #333;
}

.check-icon, .close-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

.feature-text {
  font-weight: 500;
  color: #6366f1;
}

.vip-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.upgrade-btn {
  background: linear-gradient(45deg, #6366f1, #8b5cf6);
  border: none;
  border-radius: 8px;
  height: 40px;
  font-weight: 600;
  color: white;
  transition: all 0.3s ease;
}

.upgrade-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

.contact-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6366f1;
}

.contact-icon {
  font-size: 16px;
}

.contact-text {
  font-size: 14px;
  font-weight: 500;
}

/* 顶部信息区域布局 */
.top-info-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
  align-items: start;
}

/* 信息卡片容器 */
.info-card-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 卡片标题 */
.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #6366f1;
}

.card-icon {
  font-size: 18px;
  color: #6366f1;
}

/* 统一信息卡片样式 */
.info-card {
  background: rgba(99, 102, 241, 0.05);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
  height: 180px; /* 固定高度确保对称 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.info-card:hover {
  background: rgba(99, 102, 241, 0.08);
  border-color: rgba(99, 102, 241, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

/* 卡片头部 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.status-level, .usage-title {
  font-weight: 600;
  font-size: 16px;
  color: #6366f1;
}

.status-expire, .usage-count {
  font-size: 12px;
  color: #6366f1;
  background: rgba(99, 102, 241, 0.1);
  padding: 2px 8px;
  border-radius: 12px;
}

/* 卡片内容 */
.card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.status-description {
  font-size: 13px;
  color: #666;
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.status-details, .usage-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detail-label {
  font-size: 12px;
  color: rgba(99, 102, 241, 0.7);
}

.detail-value {
  font-size: 13px;
  font-weight: 600;
  color: #333;
}

[data-theme="dark"] .detail-value {
  color: #e5e7eb;
}

[data-theme="dark"] .status-description {
  color: rgba(255, 255, 255, 0.7);
}

/* 进度条样式 */
.usage-progress {
  margin-top: 12px;
}

/* 空状态卡片样式 */
.usage-card-empty {
  background: rgba(99, 102, 241, 0.05);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
  height: 180px; /* 与其他卡片保持相同高度 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.empty-icon {
  font-size: 32px;
  color: rgba(99, 102, 241, 0.6);
  margin-bottom: 8px;
}

.empty-text {
  font-size: 14px;
  font-weight: 600;
  color: #6366f1;
  margin: 0;
}

.empty-tip {
  font-size: 12px;
  color: rgba(99, 102, 241, 0.7);
  margin: 0;
}


/* 深色模式下的信息卡片 */
[data-theme="dark"] .info-card {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.3);
}

[data-theme="dark"] .info-card:hover {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.4);
}

[data-theme="dark"] .usage-card-empty {
  background: rgba(99, 102, 241, 0.1);
  border-color: rgba(99, 102, 241, 0.3);
}

[data-theme="dark"] .card-title,
[data-theme="dark"] .card-icon {
  color: #8b5cf6;
}

[data-theme="dark"] .status-level,
[data-theme="dark"] .usage-title {
  color: #8b5cf6;
}

[data-theme="dark"] .status-expire,
[data-theme="dark"] .usage-count {
  background: rgba(139, 92, 246, 0.2);
  color: #8b5cf6;
}

[data-theme="dark"] .detail-label {
  color: rgba(139, 92, 246, 0.8);
}

[data-theme="dark"] .empty-icon {
  color: rgba(139, 92, 246, 0.8);
}

[data-theme="dark"] .empty-text {
  color: #8b5cf6;
}

[data-theme="dark"] .empty-tip {
  color: rgba(139, 92, 246, 0.7);
}

/* 响应式设计 - 移动端布局 */
@media (max-width: 768px) {
  .top-info-section {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .usage-stats {
    flex-direction: column;
    gap: 8px;
  }
  
  .usage-stat {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  
  .stat-label, .stat-value {
    margin-bottom: 0;
  }
}

/* 动画关键帧 */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(180deg); }
}

@keyframes vip-badge-shine {
  0%, 100% { left: -100%; }
  50% { left: 100%; }
}

@keyframes vip-badge-rainbow {
  0% { 
    background-position: 0% 50%; 
  }
  50% { 
    background-position: 100% 50%; 
  }
  100% { 
    background-position: 0% 50%; 
  }
}

/* 挂件动画 */
@keyframes chain-sway {
  0%, 100% { 
    transform: translateX(-50%) rotate(0deg); 
  }
  25% { 
    transform: translateX(-50%) rotate(2deg); 
  }
  75% { 
    transform: translateX(-50%) rotate(-2deg); 
  }
}

@keyframes charm-bounce {
  0%, 100% { 
    transform: translateY(0px) scale(1); 
  }
  50% { 
    transform: translateY(-3px) scale(1.05); 
  }
}

@keyframes charm-glow-open {
  0%, 100% { 
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 10px rgba(255, 71, 87, 0.4);
  }
  50% { 
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 15px rgba(255, 71, 87, 0.7);
  }
}

@keyframes charm-glow-renew {
  0%, 100% { 
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 10px rgba(255, 215, 0, 0.4);
  }
  50% { 
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 15px rgba(255, 215, 0, 0.7);
  }
}

@keyframes charm-glow-svip {
  0%, 100% { 
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 10px rgba(139, 92, 246, 0.4);
  }
  50% { 
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 15px rgba(139, 92, 246, 0.7);
  }
}

/* VIP弹窗黑色模式适配 */
[data-theme="dark"] .vip-modal :deep(.ant-modal-content) {
  background: rgba(20, 20, 20, 0.95);
  color: #ffffff;
}

[data-theme="dark"] .vip-modal :deep(.ant-modal-header) {
  background: rgba(30, 30, 30, 0.9);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .vip-modal :deep(.ant-modal-title) {
  color: #ffffff;
}

[data-theme="dark"] .vip-modal-content {
  color: #ffffff;
}

[data-theme="dark"] .comparison-title {
  color: #ffffff;
}

/* VIP权益对比表格黑色模式 */
[data-theme="dark"] .vip-comparison-table :deep(.ant-table) {
  background: rgba(30, 30, 30, 0.8);
  color: #ffffff;
}

[data-theme="dark"] .vip-comparison-table :deep(.ant-table-thead > tr > th) {
  background: rgba(40, 40, 40, 0.9);
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.1);
  border-right-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .vip-comparison-table :deep(.ant-table-tbody > tr > td) {
  background: rgba(30, 30, 30, 0.8);
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.05);
  border-right-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .vip-comparison-table :deep(.ant-table-tbody > tr:hover > td) {
  background: rgba(40, 40, 40, 0.8);
}

/* VIP权益表格内容黑色模式 */
[data-theme="dark"] .feature-name {
  color: #ffffff;
}

[data-theme="dark"] .feature-text {
  color: #8b5cf6;
}

/* 底部操作区域黑色模式 */
[data-theme="dark"] .vip-actions {
  border-top-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .contact-info {
  color: #8b5cf6;
}

[data-theme="dark"] .contact-text {
  color: rgba(255, 255, 255, 0.8);
}

/* 公告卡片样式 */
.announcement-card-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 100px;
  animation: fadeIn 0.3s ease-out;
}

.announcement-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: slideDown 0.3s ease-out;
}

.announcement-card.dark-mode {
  background: #1a1a1a;
  color: #ffffff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.announcement-card-header {
  padding: 20px 24px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.announcement-card.dark-mode .announcement-card-header {
  border-bottom: 1px solid #333;
  background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
}

.announcement-card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.close-btn {
  color: white !important;
  font-size: 16px;
  font-weight: bold;
  border: none;
  background: transparent;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

.announcement-card-content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  min-height: 300px;
  max-height: 500px;
}

.announcement-card-footer {
  padding: 16px 24px;
  border-top: 1px solid #f0f0f0;
  text-align: center;
  background: #fafafa;
}

.announcement-card.dark-mode .announcement-card-footer {
  border-top: 1px solid #333;
  background: #252525;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .announcement-card {
    width: 95%;
    margin: 20px;
    max-height: 90vh;
  }
  
  .announcement-card-overlay {
    padding-top: 50px;
  }
}
</style>
